<template>
    <div class="container">
        <a-layout class="major_container">
            <!--专业管理标题设置-->
            <a-layout-header class="major_header">
                <span>专业管理</span>
            </a-layout-header>
            <!--专业管理页面内容设置-->
            <a-layout-content class="major_content">
                <!--搜索框设置,样式设置“class”，Search按钮设置，清空输入框中的内容“allowClear”，点击事件@-->
                <a-input-search
                        class="major_search"
                        placeholder="输入要查询的专业名"
                        enter-button="Search"
                        allowClear
                        v-model="searchValue"
                        @search="search"
                />
                <!--新建专业按钮设置-->
                <a-button type="primary" class="button_contain_item" @click="addMajor('')">
                    新建
                </a-button>
                <!--批量删除按钮设置-->
                <a-button type="danger" class="button_contain_item" @click="showDeleteMajorModel">
                    批量删除
                </a-button>
                <!--表格设置，样式设置“class，size，bordered”，数据源DataSource，表头columns,前面的多选框selection，rowKey一条记录中的majorID-->
                <a-table ref="tab" class="major_table"
                         size="small"
                         bordered
                         :data-source="dataSource"
                         :columns="columns"
                         :row-selection="{onChange:change}"
                         :pagination="pagination"
                         :scroll="PageSize===5||dataSource.length<=5? {}:{ y: 380 }"
                         :rowKey='record=>record.majorId'>
                    <!--操作一列中的删除和编辑设置，operation在columns中存储-->
                    <template slot="operation" slot-scope="text, record" >
                        <!--表格删除的弹出确认框-->
                        <a-popconfirm
                                v-if="dataSource.length"
                                title="该操作会将所属该专业的班级和学生全部删除，请谨慎操作，是否确认删除?"
                                @confirm="() => deleteMajor(record.majorId)"
                        ><!--@confirm确定后的删除特定专业事件-->
                            <a href="#">删除</a>
                        </a-popconfirm>
                        <!--表格某行的特定编辑专业信息-->
                        <a href="#" @click="addMajor(record)">编辑</a>
                        <a href="#" @click="requirement(record.majorId)">要求</a>
                    </template>
                </a-table>
            </a-layout-content>
            <!--设置表格的页面跳转-->
<!--            <a-layout-footer class="major_footer">-->
<!--                <a-pagination-->
<!--                        class="pagination"-->
<!--                        show-size-changer-->
<!--                        show-quick-jumper-->
<!--                        :defaultPageSize="PageSize"-->
<!--                        :current="currentPage"-->
<!--                        :total="count"-->
<!--                        :show-total="total => `共 ${total} 条`"-->
<!--                        :pageSizeOptions="pageSizeOptions"-->

<!--                />-->
<!--&lt;!&ndash;              @change="pageChange"&ndash;&gt;-->
<!--&lt;!&ndash;              @showSizeChange="showSizeChange"&ndash;&gt;-->
<!--            </a-layout-footer>-->
        </a-layout>
        <!--新建专业信息弹框设置-->
        <AddMajor ref="addcs" @get="pageChange(1,PageSize)" @gett="pageChange(currentPage,PageSize)" ></AddMajor>
        <!--新建毕业要求指标弹框设置-->
        <Requirement ref="require" @get="pageChange(1,PageSize)" @gett="pageChange(currentPage,PageSize)"> </Requirement>
        <!--批量删除专业信息弹框设置-->
        <BatchDelete ref="deletecs" @del="deleteBatchMajor"></BatchDelete>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import AddMajor from "./AddMajor";//引入组件AddMajor
    import Requirement from "./Requirement";//引入组件Requirement
    import BatchDelete from "./BatchDelete";//引入组件BatchDelete


    //表头
    const columns = [
        {
            title: '序号',
            align: 'center',
            width: '10%',
            customRender: (text, record, index) => `${index + 1}` // 显示每一行的序号
        },
        {
            title: '专业名称',
            key:'name',
            dataIndex: 'name',
            align: 'center',
            width: '30%',
        },
        {
            title: '学院名称',
            key: 'collegeName',
            dataIndex: 'collegeName',
            width: '30%',
            align: 'center'
        },
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            scopedSlots: { customRender: 'operation' },//对应slot="operation"
        }
    ];

    export default {
        name: "ManageMajor",
        components: {
            AddMajor,
            Requirement,
            BatchDelete
        },
        data() {
            return {
                flag:0,             //标志位，第一次查询时使页面为第一页
                searchValue: '',
                selectedRowKeys:[], //默认选中第几行
                count: 0,           //总页数
                currentPage:1,      //当前页
                PageSize:5,
                pageSizeOptions: ['5', '6', '7'], // 每页数量选项
                dataSource: [],     //数据源
                columns,             //表头信息
              pagination: {
                total: 0,
                showTotal: total => `共 ${total} 条`,
                pageSizeOptions: ['5', '10', '15', '20'],
                defaultPageSize: 5,
                showSizeChanger: true,
              }, // 配置分页配置
            };
        },
      methods: {
            //删除某个特定专业需调用此方法，获取当前页和行数
            pageChange(page, pageSize){
                this.currentPage=page;
                this.PageSize=pageSize;
                if(this.searchValue === ''){ //如果搜索框中的数据为空，调用getMajorList()，返回所有专业列表
                    this.getMajorList();
                }else{                    //如果不为空，调用搜索search方法，传给输入框的数据this.searchValue
                    this.search(this.searchValue)
                }
            },
            //每页显示数量变化需要调用此方法
            showSizeChange(current, size){
                this.currentPage=1;
                this.PageSize=size;
                if(this.searchValue === ''){
                    this.getMajorList();
                }else{
                    this.search(this.searchValue)
                }
            },
            //按指定专业名称查找
            search(value){
                if(value === ''){          //当输入的内容为空时，点击Search可以获取数据列表
                    this.currentPage=1; //设置当前页
                    this.getMajorList();//获取专业的数据列表，返回第一页
                    this.flag=0;
                }else {
                    if (this.flag === 0) {
                        this.currentPage = 1
                    } //第一次查询时，要到第一页
                    this.flag++;
                    //对参数进行封装
                    const info = {
                        majorName: value,                           //获取的输入框的数据为专业名称
                        collegeId: this.accessState.collegeId,//学院ID
                        currentPage: this.currentPage,              //获取当前页
                        rows: this.PageSize,                        //当前行数
                        token: this.accessState.token,
                    };
                    this.$store.dispatch("major/queryMajor", info)
                     .then(data => {
                        this.dataSource = data.data.majorRecord;
                        this.pagination.total = data.data.count;
                     }).catch(err => {
                        this.$message.error(err.msg);
                    })
                }
            },
            //获取表格专业信息
            getMajorList(){
              //console.log(this.accessState.collegeId);
                //对参数进行封装
                const info={
                    collegeId:this.accessState.collegeId, //获取管理员ID（需要改动）
                    currentPage:this.currentPage,               //获取当前页
                    rows:this.PageSize,                         //每页的总行数
                    token:this.accessState.token,
                };
                this.$store.dispatch("major/getMajorList",info)
                    .then(data => {
                      console.log(data);
                        this.dataSource=data.data.majorRecord;         //获取数据，存储到dataSource
                        this.pagination.total=data.data.count;                    //获取总数
                    }).catch(err=>{
                    this.$message.error(err.msg);
                })
            },
            //表格中操作一列的编辑专业信息，传来行记录record
            addMajor(judge){
                this.$refs.addcs.showModel(judge);//在组件AddMajor的methods中
            },
           //显示毕业要求指标点弹窗
          requirement(key){
              this.$refs.require.showModel(key);
          },
            //获取多选框的值
            change(selectedRowKeys,selectedRows){
                this.selectedRowKeys=selectedRowKeys;
                this.selectedRowKeys=[];
                selectedRows.some(item=>{this.selectedRowKeys.push(item.majorId)});
            },
            //显示批量删除弹窗
            showDeleteMajorModel(){
                if(this.selectedRowKeys.length === 0){
                    this.$message.info('所选内容不能为空');
                }else{
                    this.$refs.deletecs.showModel();
                }
            },
            //按钮--批量删除专业
            deleteBatchMajor(){
                this.$store.dispatch("major/deleteBatchMajor",{majorIds:this.selectedRowKeys,token:this.accessState.token})
                    .then(data=>{
                            this.$message.success(data.msg);
                            this.pageChange(this.currentPage, this.PageSize);//修改当前页和总行数
                            this.selectedRowKeys=[];
                    }).catch(err=>{
                        this.$message.error(err.msg);
                    })
            },
            //删除指定课程，然后调用pageChange函数重新获取dataSource
            //调用pageChange函数，保证删除之后，仍在当前页
            deleteMajor(key) {
                this.$store.dispatch("major/deleteMajor",{majorId:key,token:this.accessState.token})
                    .then(data=>{
                        this.$message.success(data.msg);
                        //调用方法pageChange，传入当前页和当前行数
                        this.pageChange(this.currentPage, this.PageSize);
                }).catch(err=>{
                    this.$message.error(err.msg);
                })
            },
        },
        //初始化时，获取所有专业列表
        mounted() {
            this.getMajorList();
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access',
                'majorState':'major'
            })
        }
    }
</script>

<style scoped>
    .container{
        width: 100%;
        height: 100%;
    }
    .major_container {
        width: 100%;
        background-color: #fff;
    }
    .major_header {
        height: 2.8em;
        text-align: left;
        font-size: 1.4em;
        font-weight: bolder;
        background-color: #fff;
        padding: 0 1.5em;
    }
    .major_content {
        text-align: left;
        padding: 0 2em;
        overflow: hidden;
    }
    .major_search {
        width: 30em;
        display: block;
    }
    .button_contain_item {  /*新建按钮样式设计*/
        width: 6em;
        margin: 1em 1.5em;
    }
    .major_footer{
        background-color: #fff;
    }
    a{
        margin: 1em ;
    }
</style>
<style>
    .major_table th{
        background-color: #cccccc !important;
        font-size: 1em !important;
        font-weight: bold !important;
    }
</style>
